import React from "react";
// @material-ui/core components
import withStyles from "@material-ui/core/styles/withStyles";

// core components
import Card from "../../components/Card/Card.jsx";
import CardHeader from "../../components/Card/CardHeader.jsx";
import CardBody from "../../components/Card/CardBody.jsx";

const style = {
  typo: {
    paddingLeft: "25%",
    marginBottom: "40px",
    position: "relative"
  },
  note: {
    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
    bottom: "10px",
    color: "#c0c1c2",
    display: "block",
    fontWeight: "400",
    fontSize: "13px",
    lineHeight: "13px",
    left: "0",
    marginLeft: "20px",
    position: "absolute",
    width: "260px"
  },
  cardCategoryWhite: {
    color: "rgba(255,255,255,1)",
    margin: "0",
    fontSize: "14px",
    marginTop: "0",
    marginBottom: "0"
  },
  cardTitleWhite: {
    color: "#FFFFFF",
    marginTop: "0px",
    minHeight: "auto",
    fontWeight: "300",
    fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
    marginBottom: "3px",
    textDecoration: "none"
  }
};

function TypographyPage(props) {
  const { classes } = props;
  return (
    <Card>
      <CardHeader color="info">
        <h4 className={classes.cardTitleWhite}>路由介绍</h4>
        <p className={classes.cardCategoryWhite}>
          本框架采用react-router的v4.x版本作为基础路由框架进行封装。
        </p>
        <p className={classes.cardCategoryWhite}>
          框架中集成了路由拦截及过滤功能，并且将框架菜单与其对应的路由绑定，并支持多层路由嵌套；用户只需在routes目录中配置自己对应的路由并绑定到对应的业务组件中即可。
        </p>
        <p className={classes.cardCategoryWhite}>
          注意，此外框架还存在另外一种以tab作为page页的架构，其本质为单页面SPA。所以并不在上述的使用范围内，具体使用会在layout文档中说明。
        </p>
      </CardHeader>
      <CardBody>
        <div>
          <h2 id="toc_0">路由的使用</h2>

          <hr/>

          <h4 id="toc_1">路由目录结构</h4>

          <pre className={'language-text'}><code className="language-text">{`indexRoutes.js  -- 项目根路由设置
dashboard.js -- 项目功能路由设置
doc.js -- 项目文档路由设置
`}</code></pre>

          <h6 id="toc_2">indexRoutes</h6>

          <p>打开indexRoutes文件会发现，里面只配置了App组件。也就是react渲染的入口组件。<br/>
            在项目根目录下面的index.js中。我们初始化react并将react-router的实例化对象挂载到root的父容器中。从下面的代码块可以看出，我们定义在indexRoutes里的数组配置信息会遍历成对应的路由对象。
          </p>

          <pre className={'language-text'}><code className="language-text">{`import { createBrowserHistory } from 'history';
import { Router, Route, Switch } from 'react-router-dom';
const hist = createBrowserHistory();
`}</code></pre>

          <p>使用history中的createBrowserHistory来配置无hash路由模式</p>

          <p>这些准备好，就可以进行项目的初始化渲染</p>

          <pre className={'language-text'}><code className="language-text">{`ReactDOM.render(
  <Router history={hist}>
    <Switch>
      {indexRoutes.map((prop, key) => {
        return <Route path={prop.path} component={prop.component} key={key} />;
      })}
    </Switch>
  </Router>,
  document.getElementById("root")
);
`}</code></pre>

          <h6 id="toc_3">dashboard.js</h6>

          <p>这里进行一些项目的基本功能的配置</p>

          <ul>
            <li>文档根路由</li>
            <li>登录路由</li>
            <li>提示路由</li>
            <li>实例项目根路由（提供用户开发配置的路由）</li>
          </ul>

          <pre className={'language-text'}><code className="language-text">{`import Doc from '../doc/layouts/Dashboard/Dashboard';
import Login from '../pages/login';
import Index from '../pages/index';

const dashboardRoutes = [
  {
    path: '/login',
    component: Login
  },
  {
    path: '/doc',
    component: Doc
  },
  {
    path: '/index',
    component: Index
  },
  { redirect: true, path: '/', to: '/index', navbarName: "Redirect" }
];

export default dashboardRoutes;
`}</code></pre>

          <p>这里会导出一个dashboardRoutes模块对象。里面包含了功能路由以及重定向的数组信息。我们在根目录中的app.js中会使用到。</p>

          <p><code>{`app.js`}</code></p>

          <pre className={'language-text'}><code className="language-text">{`import dashboardRoutes from './routes/dashboard';
// 根据路由数据遍历构造路由对象
const switchRoutes = (
  <Switch>
    {dashboardRoutes.map((prop, key) => {
      if (prop.redirect) {
        return <Redirect from={prop.path} to={prop.to} key={key} />;
      }
      return <Route path={prop.path} component={prop.component} key={key} />;
    })}
  </Switch>
);
`}</code></pre>

          <p>到这里我们就实现了路由的基本用法</p>

          <p>TODO:</p>

          <ol>
            <li>项目的路由拦截及过滤功能介绍</li>
            <li>项目的提示路由及登录</li>
          </ol>
        </div>
      </CardBody>
    </Card>
  );
}

export default withStyles(style)(TypographyPage);
